//浮动
@mixin float($side:left) {
  float: unquote($side);
}
//左浮动
@mixin pull-left {
  @include float(left);
}
%pull-left {
  @include float(left);
}
//右浮动
@mixin pull-right {
  @include float(right);
}
%pull-right {
  @include float(right);
}
//重置浮动
@mixin reset-float($display:block) {
  float: none;
  display: $display;
}
//清除浮动
@mixin clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
    overflow: hidden;
  }
}
%clearfix {
  @include clearfix;
}
//flex父容器
@mixin flex-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}
//flex子容器
@mixin flex {
  display: block;
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-basis: 0;
  flex-basis: 0;
}
//元素居中
@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;
  @if not $width and not $height {
    transform: translate(-50%, -50%);
  } @else if $width and $height {
    width: $width;
    height: $height;
    margin: -($width / 2) #{0 0} -($height / 2);
  } @else if not $height {
    width: $width;
    margin-left: -($width / 2);
    transform: translateY(-50%);
  } @else {
    height: $height;
    margin-top: -($height / 2);
    transform: translateX(-50%);
  }
}
//子元素居中
@mixin center-children {
  display: flex;
  justify-content: center;
  align-items: center;
}
%center-children {
  @include center-children;
}
//子元素垂直居中
@mixin center-children-v {
  display: flex;
  align-items: center;
}
%center-children-v {
  @include center-children-v;
}
//子元素水平居中
@mixin center-children-t {
  display: flex;
  justify-content: center;
}
%center-children-t {
  @include center-children-t;
}
//子元素右对齐
@mixin center-children-r {
  display: flex;
  justify-content: flex-end;
}
%center-children-r {
  @include center-children-r;
}
//计算rem
$font-size: 12 !default;
@function pxToRem($px){
  @return (($px / $font-size) / 2.25) * 1rem;
}
